<template>
  <a-spin :spinning="confirmLoading">
    <a-form-model ref="form" :model="models" :rules="validatorRules">
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="businessType" required label="商家类型">
        <j-dict-select-tag placeholder="选择商家类型" dictCode="merchant_type" v-model="models.businessType" />
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="businessName" required label="商家名称">
        <a-input placeholder="请输入商家名称" v-model="models.businessName" />
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="evaluationLevel" required label="评价等级">
        <j-dict-select-tag placeholder="选择评价等级" dictCode="evaluation_level" v-model="models.evaluationLevel" />
      </a-form-model-item>
      <a-form-model-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        prop="commentKeyword"
        required
        label="评价关键词"
      >
        <div class="editIconMore clearInput">
          <j-search-select-tag
            placeholder="请添加评价关键词"
            v-model="models.commentKeyword"
            mode="multiple"
            v-if="models.commentKeyword !== '' && models.commentKeyword !== undefined"
          >
          </j-search-select-tag>
          <div class="addIcon" @click="addShop" v-if="addIconShow">+添加</div>
          <input
            type="text"
            class="shuInput"
            placeholder="请输入"
            v-model="shoppIngIcon"
            @change="search"
            v-else
          />
        </div>
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="wordNumber" required label="字数要求">
        <j-dict-select-tag placeholder="选择字数" dictCode="word_count" v-model="models.wordNumber" />
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address" required label="请输入商家的地址">
        <a-input placeholder="请输入商家这个商家的具体地址" v-model="models.address" />
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="emotionalStyle" required label="感情风格">
        <j-dict-select-tag placeholder="选择感情风格" dictCode="emotional_style" v-model="models.emotionalStyle" />
      </a-form-model-item>
      <a-form-model-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        prop="popularKeyword"
        required
        label="热门关键词"
      >
        <div class="editIconMore">
          <j-search-select-tag
            placeholder="请选择关键词"
            v-model="models.popularKeyword"
            :dictOptions="searchOptions"
            mode="multiple"
            style="min-width: 200px;"
          >
          </j-search-select-tag>
          <!-- <div class="addIcon" @click="addShop" v-if="addIconShow">添加</div>
          <input type="text" class="shuInput" v-model="shoppIngIcon" @change="search" v-else /> -->
        </div>

        <!-- <j-dict-select-tag placeholder="文案中加入热门关键词" dictCode="merchant_type" v-model="models.popularKeyword" /> -->
      </a-form-model-item>
    </a-form-model>
  </a-spin>
</template>

<script>
export default {
  name: 'CommerceProducts',
  components: {},
  props: {
    model: {
      type: Object,
      default: {},
    },
  },

  data() {
    return {
      addIconShow: true,
      searchOptions: [
        {
          text: '福利多多',
          value: '福利多多',
        },
        {
          text: '强烈推荐',
          value: '强烈推荐',
        },
        {
          text: 'YYDS',
          value: 'YYDS',
        },
        {
          text: '划重点',
          value: '划重点',
        },
        {
          text: '好吃到哭',
          value: '好吃到哭',
        },
        {
          text: '都给我冲',
          value: '都给我冲',
        },
        {
          text: '吐血推荐',
          value: '吐血推荐',
        },
        {
          text: '万万没想到',
          value: '万万没想到',
        },
        {
          text: '建议收藏',
          value: '建议收藏',
        },
      ],
      shoppIngIcon: '',
      models: this.model,
      confirmLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
      validatorRules: {
        businessType: [{ required: true, message: '请选择商家类型' }],
        businessName: [{ required: true, message: '请输入商家名称' }],
        evaluationLevel: [{ required: true, message: '请选择评价等级' }],
        commentKeyword: [{ required: true, message: '请添加评价关键词' }],
        wordNumber: [{ required: true, message: '请选择字数要求' }],
        address: [{ required: true, message: '请输入商家的地址' }],
        emotionalStyle: [{ required: true, message: '请选择感情风格' }],
        popularKeyword: [{ required: true, message: '请输入热门关键词' }],
      },
    }
  },

  created() {},
  computed: {
    models1() {
      return this.models
    },
  },
  watch: {
    models1: {
      handler(newVal, oldVal) {
        // console.log('newVal + oldVal',newVal, oldVal)
        // console.log('handler',newVal,  this.model)
        if (!newVal.businessType) {
          //只需判断一个即可
          this.model.businessType = '美食'
          this.model.evaluationLevel = '好评'
          this.model.wordNumber = '50-100字'
          this.model.emotionalStyle = '正常'
        }
      },
      deep: true,
      immediate: true,
    },
  },
  updated() {},
  mounted() {},
  methods: {
    // 添加标签
    addShop() {
      this.addIconShow = false
    },
    search(event) {
      let str = event.target.value
      console.log('event.target.value', event.target.value)
      this.shoppIngIcon = ''
      if (this.models.commentKeyword === undefined || this.models.commentKeyword === '') {
        this.models.commentKeyword = ''
        this.models.commentKeyword = str
      } else {
        this.models.commentKeyword += ',' + str
      }
      this.addIconShow = true
    },
    generatedBtnProp() {
      let obj = {
        businessType: this.models.businessType,
        businessName: this.models.businessName,
        evaluationLevel: this.models.evaluationLevel,
        commentKeyword: this.models.commentKeyword,
        wordNumber: this.models.wordNumber,
        address: this.models.address,
        emotionalStyle: this.models.emotionalStyle,
        popularKeyword: this.models.popularKeyword,
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit('appApiAsk', 1, obj)
        } else {
          this.$emit('appApiAsk', 2, obj)
        }
      })
    },
  },
}
</script>

<style lang="less">
</style>